{% extends "base.html" %}

{% block page_title %}Candidates for Election {{ title }}{% endblock %}

{% block styles_head %}
  <link rel="stylesheet" type="text/css" href="/static/styles/jquery.countdown.css">
{% endblock styles_head %}

{% block javascript_head %}
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script src="/_ah/channel/jsapi" type="text/javascript"></script>
  <script type="text/javascript" src="/static/javascript/third-party/jquery.countdown.min.js"></script>
  <script src="/static/javascript/view.js" type="text/javascript"></script>
  <script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(function() {
      updateLiveChart({{ election_state|safe }});
      initializeHistoryChart();
    });

    var electionHistory = {{ history|safe }};
    var candidates = {{ candidates|safe }};
    var countdownTimerText = 'Polls Open';

    {% if election_active == "ACTIVE" %}
      var electionId = '{{ election_id }}';
      countdownTimerText = 'Polls Close';
    {% endif %}

    {% if countdown_time > 0 %}
      var countdownTime = {{ countdown_time }} * 1000;
    {% endif %}
  </script>

  {% if ads_enabled %}
    <script>
      google.load('payments', '1.0', {
        'packages': ['sandbox_config']
      });

      // Success handler
      var successHandler = function(purchaseActionStatus){
        if (window.console != undefined) {
          console.log("Purchase completed successfully: ", purchaseActionStatus);
          var formData = new FormData();
          formData.append("ads_enabled", 'False');

          var xhr = new XMLHttpRequest();
          xhr.open("post", '/elections/{{ election_id }}/update');
          xhr.send(formData);
          window.location.reload(true);

        }
      }

      // Failure handler
      var failureHandler = function(purchaseActionStatus){
        if (window.console != undefined) {
          console.log("Purchase did not complete ", purchaseActionStatus);
        }
      }

      function purchase() {
        var generated_jwt = '{{ ads_free_jwt }}';

        goog.payments.inapp.buy({
          'jwt'     : generated_jwt,
          'success' : successHandler,
          'failure' : failureHandler
        });
      }
    </script>
  {% endif %}
{% endblock javascript_head %}

{% block content %}
  <h3>{{ title }}</h3>
  <div id="countdown"></div>
  <p class="open_text_block">
  {% if election_active == "ACTIVE" %}
    <strong>There are two ways for your constituents to vote for the {{ title }}.</strong>
    You can print out barcodes using the link below, and place the barcodes next to the
    items being voted on. When the barcodes are scanned using a mobile
    phone, they'll open the user's browser to a web site where they can
    vote. Alternatively, if your users are in front of a computer, you
    can point them to the URL below.</p>
    <div data-tech-name="QR Code Generation" data-tech-url="templates/print.html#15">
      <img src="/static/images/icons/printer.png" class="flanker_icon">
      <a href="/elections/{{ election_id }}/print" class="big_link" target="_blank">Print Barcodes</a>
    </div>
    <div>
      <img src="/static/images/icons/tick.png" class="flanker_icon" />
      Online voting page URL: <a href="/vote/{{ election_id }}">http://demoqracy.com/vote/{{ election_id }}</a>
    </div>
    {% if ads_enabled %}
    <div data-tech-name="In App Payments" data-tech-url="templates/view.html#20">
        Ads are enabled for this election. Ads will be displayed on the voting pages. <a onclick="purchase()">Go Ads-Free for $0.99!</a>
    </div>
    {% else %}
    <div data-tech-name="In App Payments" data-tech-url="templates/view.html#20">
        This election is ad free. Thanks for your support!
    </div>
    {% endif %}
  {% elif election_active == "ENDED" %}
    <p>This election has ended.</p>
    {% if winners|length == 1 %}
      <p>{{ winners[0].name }} won!</p>
    {% else %}
      <p>The following candidates tied: {% for winner in winners %}{{ winner.name }}{% if not loop.last %}, {% endif %}{% endfor %}</p>
    {% endif %}
  {% else %}
    <p>This election has not started yet.</p>
  {% endif %}
  <div id="charts_div" data-tech-name="Google Chart Tools" data-tech-url="static/javascript/view.js#5" style="margin-top: 10px">
    <div class="box flex_column_item">
      <div class="box_header">{% if election_active == "ACTIVE" %}Live {% endif %}Results</div>
      <div class="box_contents">
        <span id="bar-chart">{% if total_votes == 0 %}No votes yet.{% else %}Loading chart...{% endif %}</span>
      </div>
    </div>
    <div class="box flex_column_item">
      <div class="box_header">Vote Percentage Over Time</div>
      <div class="box_contents">
        <div>
          <input type="button" id="play" value="Play" disabled></input>
          <input id="history-range" type="range" value="0" min="0" max="{{ vote_count }}" data-tech-name="HTML5 Range Control" data-tech-url="templates/history.html#20" disabled/>
        </div>
        <span id="history-chart">{% if total_votes == 0 %}No votes yet.{% else %}Loading chart...{% endif %}</span>
      </div>
    </div>
  </div>
{% endblock content %}

{% block dummy_tech_spans %}
  <span data-tech-name="Web Workers" data-tech-url="static/javascript/history-worker.js#2"></span>
{% endblock dummy_tech_spans %}